import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"

interface FinanceCardProps {
  title: string
  amount: number
  rate: string
  period: string
  onInvest: () => void
}

export function FinanceCard({ title, amount, rate, period, onInvest }: FinanceCardProps) {
  return (
    <Card className="w-full mb-4">
      <CardHeader>
        <CardTitle className="text-lg">{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold text-primary mb-2">
          ¥{amount.toLocaleString()}
        </div>
        <div className="flex justify-between text-sm text-muted-foreground">
          <span>预期年化: {rate}</span>
          <span>投资期限: {period}</span>
        </div>
      </CardContent>
      <CardFooter>
        <Button className="w-full" onClick={onInvest}>
          立即投资
        </Button>
      </CardFooter>
    </Card>
  )
}